// components/organisms/TopIconsPrivate.styles.js
import { styled, alpha } from '@mui/material/styles';
import { AppBar, Toolbar, Button, Typography, Box } from '@mui/material';
import { motion } from 'framer-motion';

// Main TopIconsPrivate styles
export const StyledAppBar = styled(AppBar)(({ theme, darkMode }) => ({
  background: darkMode ? '#0d0d0d' : '#f5f5f5',
  boxShadow: `0 0 12px ${alpha('#40d47e', 0.3)}`,
  borderBottom: `1px solid ${alpha('#40d47e', 0.3)}`,
  transition: 'all 0.3s ease',
}));

export const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  padding: theme.spacing(1, 2),
  background: 'transparent',
  borderRadius: '8px',
  backdropFilter: 'blur(6px)',
  [theme.breakpoints.up('md')]: {
    padding: theme.spacing(1, 3),
  },
  minHeight: '70px',
}));

export const ModernButton = styled(Button)(({ theme }) => ({
  height: '30px',
  fontSize: '0.75rem',
  fontWeight: 600,
  borderRadius: '6px',
  marginRight: theme.spacing(0.5),
  textTransform: 'uppercase',
  backgroundColor: '#fff',
  color: '#40d47e',
  border: `1px solid ${alpha('#40d47e', 0.6)}`,
  '&:hover': {
    backgroundColor: alpha('#40d47e', 0.1),
    boxShadow: `0 0 8px ${alpha('#40d47e', 0.5)}`,
  },
  transition: 'all 0.2s ease',
}));

// LogoComponent styles
export const StyledTypography = styled(Typography)(({ fontSize, darkMode, isHomePage }) => ({
  flex: '0 0 auto',
  fontWeight: 600,
  fontSize,
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  color: isHomePage ? '#fff' : '#40d47e',
  textShadow: `0 0 6px ${alpha('#40d47e', 0.5)}`,
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
}));

export const LogoWrapper = styled(Box)(() => ({
  display: 'flex',
  alignItems: 'center',
  padding: '8px 0px',
  transition: 'all 0.3s ease',
  background: 'transparent',
}));

export const FixedLogoText = styled(motion.div)(({ darkMode, isHomePage }) => ({
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  fontSize: '1.2rem',
  fontWeight: 400,
  letterSpacing: '0.05em',
  color: '#40d47e',
  lineHeight: 1.1,
  position: 'relative',
  margin: 0,
  padding: 0,
}));

// Inline styles objects
export const secondToolbarSx = (scrolled) => ({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
  padding: { xs: '0.5rem 1rem', md: '0.5rem 2rem' },
  minHeight: 'auto',
  width: '100%',
  opacity: scrolled ? 0.95 : 1,
  transition: 'opacity 0.3s ease',
});

// UPDATED STYLE 1 of 6
export const dragHandleIconButtonSx = () => ({
  backgroundColor: '#f0f0f0',
  borderRadius: '4px',
  boxShadow: 'none',
  transition: 'all 0.2s ease',
  ml: 1,
  '&:hover': {
    backgroundColor: '#e0e0e0',
  },
  '&:active': {
    transform: 'scale(0.95)',
  },
});

// UPDATED STYLE 2 of 6
export const dragHandleIconSx = () => ({
  color: '#333',
  fontSize: '1.5rem',
  textShadow: 'none',
});

// UPDATED STYLE 3 of 6
export const homeIconSx = (iconSize) => ({
  //fontSize: iconSize,
  color: '#333',
  filter: 'none',
});

// UPDATED STYLE 4 of 6
export const homeIconButtonSx = (iconSize) => ({
  //fontSize: iconSize,
  //width: iconSize,
  //height: iconSize,
  display: 'none',
  //display: 'flex',
  backgroundColor: '#f0f0f0',
  borderRadius: '4px',
  boxShadow: 'none',
  alignItems: 'center',
  justifyContent: 'center',
  ml: '-5px',
  '&:active': {
    transform: 'scale(0.97)',
  },
});

export const languageButtonSx = {
  padding: '0 12px',
  minWidth: 'auto',
};

export const featurePillSx = () => ({
  ml: 2,
  display: 'flex',
  alignItems: 'center',
  height: '24px',
  borderRadius: '12px',
  px: 1.5,
  backgroundColor: alpha('#40d47e', 0.1),
  border: `1px solid ${alpha('#40d47e', 0.3)}`,
});

export const featurePillTypographySx = () => ({
  fontSize: '0.65rem',
  fontWeight: 700,
  color: '#40d47e',
  letterSpacing: '0.05em',
  textTransform: 'uppercase',
});

export const menuPaperSx = () => ({
  mt: 1,
  '& .MuiPaper-root': {
    borderRadius: '10px',
    backgroundColor: alpha('#fff', 0.92),
    border: `1px solid ${alpha('#40d47e', 0.25)}`,
    backdropFilter: 'blur(10px)',
    boxShadow: `0 0 12px ${alpha('#40d47e', 0.3)}`,
  },
});

export const menuItemSx = (_, selected = false) => ({
  fontSize: '0.8rem',
  py: 1,
  minWidth: '120px',
  color: '#40d47e',
  ...(selected && {
    '&.Mui-selected': {
      backgroundColor: alpha('#40d47e', 0.1),
    },
  }),
});

export const disabledMenuItemSx = {
  fontSize: '0.8rem',
  opacity: 0.5,
  color: '#999',
};

// Fixed logo styles
export const fixedLogoContainerSx = {
  position: 'fixed',
  top: '10px',
  left: { xs: '10px', sm: '20px' },
  zIndex: 1300,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
};

// LogoComponent link styles
export const logoLinkStyle = {
  display: 'flex',
  alignItems: 'center',
  textDecoration: 'none',
  cursor: 'pointer',
};

export const logoTextContainerSx = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
};

export const logoTextSx = {
  lineHeight: 0.8,
};

// UPDATED STYLE 5 of 6
export const portalButtonSx = (_, additionalStyle = {}) => ({
  backgroundColor: '#f0f0f0',
  borderRadius: '4px',
  boxShadow: 'none',
  ...additionalStyle,
});

// UPDATED STYLE 6 of 6
export const portalDragIconSx = () => ({
  color: '#333',
  fontSize: '1.5rem',
  textShadow: 'none',
});